<template>
  <div class="synopsis-content">
    <!-- 轮播图 -->
    <div>
      <swiper :options="swiperOption" ref="mySwiper" style="min-width: 1200px">
        <swiper-slide
          class="swiper-slide swiper-container-3d"
          v-for="(banner, index) in bannerList"
          :key="index"
          style="
            position: relative;
            overflow: hidden;
            width: 100%;
            height: 260px;
          "
        >
          <img
            :src="banner.img"
            style="
              position: absolute;
              top: 0;
              left: 50%;
              width: 1920px;
              height: 260px;
              margin-left: -960px;
            "
          />
        </swiper-slide>
      </swiper>
    </div>
    <div class="sy-body w1280">
      <!-- 面包屑 -->
      <div style="display: flex; align-items: center; margin: 18px">
        <img src="../../assets/home.png" alt="" />
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/ApplicationMember' }"
            >会员服务</el-breadcrumb-item
          >
          <el-breadcrumb-item>资料下载</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="content-body">
        <!-- 菜单栏 -->
        <div class="menu-box">
          <div class="menu-title">
            <img src="../../assets/icon.png" alt="" />
            <span>会员服务</span>
          </div>
          <div class="menu-item">
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#FFFFFF"
              text-color="#666666"
              active-text-color="#0056A2"
              router
              :default-active="this.$router.path"
            >
              <el-menu-item index="/ApplicationMember">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">入会申请</span>
              </el-menu-item>
              <el-menu-item index="/ResourceDonwload">
                <img
                  src="../../assets/right-select.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">资料下载</span>
              </el-menu-item>
              <el-menu-item index="/">
                <img
                  src="../../assets/right-none.png"
                  style="margin-right: 19px"
                  alt=""
                />
                <span slot="title">培训服务</span>
              </el-menu-item>
            </el-menu>
          </div>
        </div>
        <!-- 内容栏 -->
        <div class="content-box">
          <div class="content-title">资料下载</div>
          <div class="table-box">
            <el-table :data="tableData" stripe style="width: 100%">
              <el-table-column prop="date" label="资料名称" width="300">
              </el-table-column>
              <el-table-column prop="name" label="文件格式" width="180">
              </el-table-column>
              <el-table-column prop="address" label="更新时间">
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <div>
                    <img src="../../assets/down.png" alt="" />
                    <el-button
                      type="text"
                      @click="handleEdit(scope.$index, scope.row)"
                      >下载</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="1000"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "ResourceDonwload",
  data() {
    return {
      tableData: [
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
        {
          date: "贵州省担保业协会入会申请表（一）",
          name: "pdf",
          address: "2023-04-01",
        },
      ],
      //   轮播图配置参数
      swiperOption: {
        loop: true, //是否循环轮播
        speed: 1000, //切换速度
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        //自动轮播
        autoplay: {
          delay: 2000,

          disableOnInteraction: false,
        },
      },
      bannerList: [
        {
          img: require("../../assets/banner1.png"),
        },
      ],
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
  
  <style scoped>
  .pagination{
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.synopsis-content {
  background-color: rgb(246, 246, 246);
}
.sy-body {
  /* margin-top: 18px; */
}

.content-body {
  background-color: #fff;
  padding: 30px;
  display: flex;
  margin-bottom: 50px;
}

.content-body .menu-box {
  /* border: 1px solid #dcdadd; */
  flex: 1;
  border-radius: 5px;
  margin-right: 40px;
}

.content-body .content-box {
  flex: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content-body .content-box .content-title {
  font-size: 28px;
  font-family: Microsoft YaHei;
  margin-bottom: 30px;
}

.table-box {
  width: 100%;
}

.menu-title {
  background-color: #0056a2;
  color: #fff;
  font-size: 22px;
  display: flex;
  align-items: center;
  padding: 24px 12px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.menu-title span {
  margin-left: 12px;
}

.menu-item {
  border: 1px solid #dcdadd;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 16px;
}
</style>